<template>
  <div class="outmain ba_f heighthv pad_20 bor_rad5">
    <div class="shuju_title">
      <div class="shuju_title_text">
        <span>{{ pageType == 1 ? '商品活动' : '第二件折扣' }}</span>
      </div>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline searchform mar_t20">
      <el-form-item>
        <el-button type="primary" size="medium" @click="addEditActive('')">新增活动</el-button>
      </el-form-item>
      <!-- <el-form-item label="活动名称">
          <el-input v-model="formInline.name" size="medium" placeholder="请输入优惠券名称" @input="onSearch"></el-input>
        </el-form-item>
        <el-form-item label="活动类型">
          <el-select v-model="formInline.type" placeholder="请选择" @change="onSearch">
            <el-option v-for="item in labelOptions" :key="item.label" :label="item.value" :value="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
      </el-form-item>-->
    </el-form>
    <div class="tabledata mar_t20">
      <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-bottom: 20px;">
        <el-tab-pane label="待开始" name="1"></el-tab-pane>
        <el-tab-pane label="进行中" name="2"></el-tab-pane>
        <el-tab-pane label="已失效" name="3"></el-tab-pane>
      </el-tabs>
      <el-table :data="datalist" v-loading="listLoading" :element-loading-text="elementLoadingText" stripe style="width: 100%">
        <el-table-column prop="name" label="商品名称">
          <template slot-scope="scope">
            <div class="flex">
              <div class="flex-g-0">
                <el-image style="width: 60px;height: 60px;border-radius: 10px;" :src="scope.row.icon" fit="cover"></el-image>
              </div>
              <div class="flex-g-1 t_l">
                <div class="mar_l10">{{scope.row.name}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="活动规则" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" type="success">{{ pageType == 1 ? (scope.row.type == 1 ? '特价' : (scope.row.type == 2 ? parseFloat(scope.row.goodsMoney) + '折' : '减￥' + scope.row.goodsMoney)) : scope.row.type == 4 ? `第二件${parseFloat(scope.row.goodsMoney)}折` : '买一送一'}}</el-tag>
            <div v-if="scope.row.type != 5">
              <span class="mar_r10">{{ pageType == 1 ? (scope.row.type == 3 ? '￥' + parseFloat(scope.row.discount).toFixed(2) : (scope.row.type == 2 ? '￥' + (scope.row.price*(scope.row.goodsMoney/10)).toFixed(2) : scope.row.goodsMoney)) : scope.row.type == 4 ? '￥' + (scope.row.price*(scope.row.goodsMoney/10)).toFixed(2) : '' }}</span>
              <span class="color_9" style="text-decoration:line-through;">￥{{ scope.row.price }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="活动时间" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.startTime}}</div>
            <div>{{scope.row.endTime}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="每日库存" align="center"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="display" label="状态" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.display" active-value="1" inactive-value="2" @change="changeSwitch(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <template v-if="activeName1 != 3">
              <el-button type="text" @click="addEditActive(scope.row.id)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.row.id,3)">作废</el-button>
            </template>
            <el-button type="text" @click="handleDelete(scope.row.id,2)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="10" :current-page.sync="currentPage" @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>
<script>
import { goodsActiveList, repGoodsActive } from '@/api/good.js';

export default {
  data() {
    return {
      pageType: 1,
      activeName: '2',
      activeName1: '2',
      total: 0,
      currentPage: 1,
      formInline: {
        name: '',
        type: ''
      },
      typeName: {
        1: '特价商品',
        2: '折扣商品',
        3: '立减商品'
      },
      datalist: [],
      listLoading: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      labelOptions: [
        {
          label: 1,
          value: '特价商品'
        },
        {
          label: 2,
          value: '折扣商品'
        },
        {
          label: 3,
          value: '立减商品'
        }
      ]
    };
  },
  created() {
    this.pageType = this.$route.query.pageType || 1;
    this.getGoodsList();
  },
  methods: {
    // 切换状态
    handleClick(msg) {
      this.getGoodsList(1, msg.name);
    },
    // 获取活动列表
    getGoodsList(page = 1, type = 2) {
      goodsActiveList({ page: page, type, activityType: this.pageType }).then((res) => {
        if (res.code == 1) {
          this.total = res.count;
          this.datalist = res.data;
          this.activeName1 = this.activeName;
        }
        this.listLoading = false;
      });
    },
    // 编辑添加查看
    addEditActive(id = '') {
      this.$router.push({
        path: '/goodsActiveAdd',
        query: {
          id: id,
          pageType: this.pageType
        }
      });
    },
    // 删除活动
    handleDelete(id, type) {
      this.$baseConfirm(`你确定要${type == 2 ? '删除' : '作废'}当前项吗`, null, () => {
        repGoodsActive({ id: id, type }).then((res) => {
          if (res.code == 1) {
            this.$baseMessage(type == 2 ? '删除成功！' : '成功作废！', 'success');
            this.getGoodsList(1, this.activeName);
          }
        });
      });
    },
    // 状态开关
    changeSwitch(row) {
      repGoodsActive({ id:row.id, type: 1, display:row.display}).then((res) => {
        if (res.code == 1) {
          this.$baseMessage('操作成功！', 'success');
        }
      });
    },
    // 页面切换
    handleCurrentChange(msg) {
      this.getGoodsList(msg);
    }
  }
};
</script>
<style lang="scss" scoped>
.coupon-item {
  white-space: nowrap;
  padding: 20px 27px 17px;
  display: flex;
  flex-direction: column;
  background: rgba(51, 136, 255, 0.07);
  margin-right: 20px;
  flex: 1;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
}
</style>
